<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="鲸鱼">
	<title>营销分析--活动分析</title>
	<link rel="stylesheet" href="css/daterangepicker.css">
	<link rel="stylesheet" href="css/style.css">
	<!--<script type="text/javascript" src="js/jquery.js"></script>-->
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/moment.min.js"></script>
	<script type="text/javascript" src="js/jquery.daterangepicker.js"></script>
	<script type="text/javascript" src="js/highchart.js"></script>
	<script type="text/javascript" src="js/grid.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/table/jquery.table2excel.js"></script>
	<!--<script type="text/javascript" src="build.js"></script>-->

	<style>
		.search-area .date{margin-left: 0;}
		.search-area .date .searchBox{text-indent: 5px;text-align: left;color: #666;margin-left: 20px;font-size: 12px;}
		.searchBox::-webkit-input-placeholder { color:#666;font-family: "微软雅黑";}
		.searchBox:-moz-placeholder { color:#666;font-family: "微软雅黑";}
		.searchBox::-moz-placeholder { color:#666;font-family: "微软雅黑";}
		.searchBox:-ms-input-placeholder { color:#666;font-family: "微软雅黑";}
		.tablebox{max-width: 96%;overflow-x:auto;margin:0 auto; position: relative;}
		.tablebox .data-table{width: 150%;margin-top: 0;}
    .tablediv {
      float: left;
      width: 95%;
      max-height: inherit;
    }
    .right-more{float:right;width:5%;right: 0;background: #fff;top: 0;text-align: center;border: 1px solid #000;border-bottom: 1px solid #000;box-sizing: border-box;}
    .right-more li{background: url(images/more.png) no-repeat center;height: 27px;border-bottom: 1px solid #000;}
    .right-more li:hover{background: url(images/more-hover.png) no-repeat center;cursor: pointer;}
    .right-more .li1{line-height: 55px;background: #ccc0da;height: 55px;font-weight: bold;color: #000;}
    .right-more .li1:hover{background: #ccc0da;cursor: inherit;}
		#iframe{
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<div class="analyseBox">
		<p class="head-title">投资金额分析</p>
		<div class="search-area">
			<div class="area1">
				<div class="date">
					<label for="date-select">选择月份：</label><input type="text" id="date-select" size="15">
					<input type="text" placeholder="输入活动标题搜索" class="searchBox">
				</div>
			</div>
			<div class="area2">
				<span>统计区域：</span>
				<div class="divs">
					<div class="provinces">
						<ul>
							<li class="all-pros">全部省</li>
							<li>福建</li>
							<li>广东</li>
						</ul>
					</div>
					<div class="citys">
						<ul>
							<li class="all-citys on">全部市</li>
						</ul>
					</div>
				</div>
			</div>
			<div>
				<input type="button" value="查询" class="search" onclick="checkInfo2()">
			</div>
		</div>
    <!--hide-->
		<div class="show-area ">
			<div class="box">
				<div class="opespan">
					<p class="chart-title">活动列表</p>
					<p class="operator"><span>全屏查看</span></p>
				</div>
				<div class="sexdiv">
					<a href="javascript:;" class="export" id="export">导出数据↓</a>
				</div>
        <!--表格-->
				<div class="tablediv" id="activeList"></div>
        <!--更多-->
        <div class="right-more" id="rightMoreList"></div>
      </div>
		</div>
	</div>
	<div id="iframe" class="hide" data-list=""></div>
</body>
<script>
  /**
   * 格式化时间
   * @param {String} format 时间格式 默认输出 2016/08/9
   */
  Date.prototype.format = function(format) {
    format = format || 'yyyy/MM/d'
    var date = {
      "M+": this.getMonth() + 1,
      "d+": this.getDate(),
      "h+": this.getHours(),
      "m+": this.getMinutes(),
      "s+": this.getSeconds(),
      "q+": Math.floor((this.getMonth() + 3) / 3),
      "S+": this.getMilliseconds()
    };
    if (/(y+)/i.test(format)) {
      format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (var k in date) {
      if (new RegExp("(" + k + ")").test(format)) {
        format = format.replace(RegExp.$1, RegExp.$1.length == 1
          ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
      }
    }
    return format;
  }

//  function isMonthRange(str, monthNum){
//     monthNum = monthNum || 6
//     format = format || 'yyyy-MM-dd'
//     var _data = new Date(str)
//     var _dataNow = new Date()
    
//     var timestamp = _data.getTime()
//     var timestampNow = _dataNow.getTime()
    

    
// }
/**
   * 比较两个时间
   * @param {String} parameter 时间格式  2016-08-9
   * @param {String} timeEnd 结束时间
   * @param {String} monthNum 判断两个时间段是否相差 m 个月 
   * @param {bool} return 
   */
function isMonthRange(timeStart, timeEnd, monthNum)  {  
    monthNum = monthNum || 6
    timeStart = new Date(timeStart)
    timeEnd = new Date(timeEnd)
  
    var diffyear = timeEnd.getFullYear() - timeStart.getFullYear() ;  
    var diffmonth = diffyear * 12 + timeEnd.getMonth() - timeStart.getMonth() ;  
    if(diffmonth < 0 ){  
        return false ;  
    }  
  
    var diffDay = timeEnd.getDate() - timeStart.getDate() ;  
  
    if(diffmonth < monthNum || (diffmonth == monthNum && diffDay <= 0)){  
          
        if(diffmonth == monthNum && diffDay == 0){  
            var timeA = timeStart.getHours()*3600+60*timeStart.getMinutes()+timeStart.getSeconds();  
            var timeB = timeEnd.getHours()*3600+60*timeEnd.getMinutes()+timeEnd.getSeconds();  
            if(timeB-timeA > 0){  
                return false;  
            }  
        }  
        return true ;  
    }  
    return false ;  
}  

var aaaa = isMonthRange('2014-2-12', '2014-04-11')
console.log(aaaa)

 

function getDays(day){
	day = day.toString()
	var ye, mo, da, days;
	if (day.length == 8) {
		ye = day.substring(0, 4)
		mo = day.substring(4, 6).replace("0", "")
		da = day.substring(6, 8).replace("0", "")
		days = ye+"年"+mo+"月"+da +"日"
	} else {
		var days = "未知时间"
	}
	return days
}

  $(function(){

    //全局的AJAX访问，处理AJAX清求时SESSION超时
$.ajaxSetup({
    contentType : "application/x-www-form-urlencoded;charset=utf-8",
    beforeSend : function(XMLHttpRequest, textStatus){
    	
          //通过XMLHttpRequest取得响应头，sessionstatus           
          var sessionstatus = XMLHttpRequest.getResponseHeader("sessionstatus"); 
          console.log(textStatus)
          console.log(sessionstatus)
          if(sessionstatus == "timeout"){
               //跳转的登录页面
               window.location.replace('${ctx}/login');
               return;
       		}	
    }
});
		// console.log( new Date('20170606').format('yyyy年MM月dd日'));



		// console.log(getDays(25415351));


    $(document).on("click", ".right-more li", function () {
      $("#iframe").empty();
//      console.log($(this).attr('data-c'))
      let dataC = $(this).attr('data-c')
      var iframe = '<iframe id="iframeBox" data-c="' + dataC + '" src="./营销分析-更多分析.html" width="100%" height="100%" scrolling="NO" frameborder="100%" ></iframe>'

      $('#iframe').html(iframe).removeClass()
    })

    //日期选择
    $('#date-select').dateRangePicker({
      autoClose: true,
      singleDate : true,
      showShortcuts: false,
      beforeShowDay: function(t)
      {
        var n = new Date();
        n.setDate(n.getDate());
        var m = n.getTime();
        var valid = !(t.getTime()>m);  //disable saturday and sunday
        var _class = '';
        var _tooltip = valid ? '' : '超过当天日期不可选';
        return [valid,_class,_tooltip];
      }
    });

    var d = new Date().Format('yyyy-MM');
    $('#date-select').val(d);

    // 请求
    $.ajax({
      type : "GET",  //请求方式
//      url : "/jinr-bi-web/activity/selectActivityAnalyze",  //请求路径
      url : "./json/a.json",  //请求路径
      traditional: true,
      data : {  //请求参数
        month: '2016-08',
        eventName: '红包',
        province: '北京',
        city : '北京'
      },
      dataType: "json",
      success : function(msg) {  //异步请求成功执行的回调函数
        var thead = [
          ['序号','活动名称','红包总数','红包金额','参与人数','新注册用户','新增首投用户','复投用户','活动期限',],
          ['注册人数','绑卡人数','注册绑卡率','新增首投人数','有效新增首投人数','有效投资占比','复投人数','有效复投人数','复投占比','开始日期','结束日期','在线天数',],
        ]
        var tbodyArr = msg.eventsList

        $('#activeList').html(createTableActiveList(tbodyArr))
        $('#rightMoreList').html(createMoreList(tbodyArr))
        exportTable('#export', '.table', 'table')
      },
      error : function(XMLHttpRequest, textStatus, errorThrown) {
        //alert(textStatus);
        //alert("失败了"+errorThrown)
      }
    });


//    $.ajax({
////      url : "/jinr-bi-web/activity/selectActivityAnalyze",
//      url : "/jinr-bi-web/operation/InvestAmount",
//      type : "POST",
//      data : {  //请求参数
////        month: '2017-06',
////        eventName: '红包',
////        province: '福建',
////        city : '全部市'
//        statisticType:'小时',
//        startDate:'2017-05-29',
//        endDate: '2017-06-04',
//        province:'福建',
//        city:'厦门',
//        productCodes: ['00000008', '00000004','00000005']
//      },
//      success : function(data) {
//        // 填充表格(活动列表)
//        var a1 = eval(data.eventsList);
//        var tableStr1 = '';
//        for (var j = 0; j < a1.length; j++) {
//          var c1 = a1[j];
//          tableStr1 += '<tr>';
//          var b1 = [ c1.id, c1.eventName, c1.hbTotal, c1.hbMoneys,
//            c1.hbUsers, c1.newRegUsers, c1.newCardUsers,
//            c1.newRegCardRate, c1.firstUsers, c1.firstValidUsers,
//            c1.firstValidInvestmentRate, c1.repeatUsers, c1.repeatValidUsers,
//            c1.repeatValidInvestmentRate, c1.eventStime, c1.eventEtime,
//            c1.onlineDays ];
//          for (var i = 0; i < b1.length; i++) {
//            tableStr1 += '<td>' + b1[i] + '</td>';
//          }
//          tableStr1 += '</tr>';
//          // alert(tableStr);
//        }
//        $('#events').append(tableStr1);
//        // alert("success++++++++++++++++++++++++++++++++++++++");
//      }
//    });
  });



  /**
   * 查询操作
   */
  function checkInfo2(){
    var date = $('#date-select').val();
    var searchCon = $('.searchBox').val();
    var province = $('.provinces').find('li.on').text();
    if(date == '' || date == null){
      alert('月份不能为空');
    }else if(searchCon == '' || searchCon == null){
      alert('搜索内容不能为空');
    }else if(province == ''||province == null){
      alert('省份不能为空');
    }else{
      $('.show-area').show();
    }
  }

  /**
   * 导出数据表格
   * @param {字符串} eventObject 事件对象 点击谁
   * @param {字符串} tableDiv 选择导出对象
   * @param {字符串} FileName 导出文件名 默认 FileName+时间
   */
  function exportTable(eventObject, tableDiv, FileName) {
    FileName = FileName || "myFileName" + new Date().toISOString().replace(/[\-\:\.]/g, ""),
      // 导出表格
      $(eventObject).on('click', function () {
        $(tableDiv).table2excel({
          exclude: ".noExl",
          name: "Excel Document Name",
          filename: FileName,
          fileext: ".xls",
        });
      })
  }

  /**
   * 创建活动列表表格
   * @param {Array} theadArr 表头数组
   * @param tbodyArr 数据
   * return 整个表格
   */
  function createTableActiveList(tbodyArr, theadArr) {
    var _table;
    _table ='<table class="table" cellpadding="0" cellspacing="0" border="1" border-spacing="0" bordercolor="#000">'
    _table += '<thead>'
        _table += '<tr>'
            _table += '<th rowspan="2" >序号</th>'
            _table += '<th rowspan="2" >活动名称</th>'
            _table += '<th rowspan="2" >红包总数</th>'
            _table += '<th rowspan="2" >红包金额</th>'
            _table += '<th rowspan="2" >参与人数</th>'
            _table += '<th colspan="3" >新注册用户</th>'
            _table += '<th colspan="3" >新增首投用户</th>'
            _table += '<th colspan="3" >复投用户</th>'
            _table += '<th colspan="3" >活动期限</th>'
          _table += '</tr>'
          _table += '<tr >'
            _table += '<th >注册人数</th>'
            _table += '<th >绑卡人数</th>'
            _table += '<th >注册绑卡率</th>'
            _table += '<th >新增首投人数</th>'
            _table += '<th >有效新增首投人数</th>'
            _table += '<th >有效投资占比</th>'
            _table += '<th >复投人数</th>'
            _table += '<th >有效复投人数</th>'
            _table += '<th >复投占比</th>'
            _table += '<th >开始日期</th>'
            _table += '<th >结束日期</th>'
            _table += '<th >在线天数</th>'
	      _table += '</tr>'
    _table += '</thead><tbody>'
    tbodyArr.forEach(function(ele,index){

      _table += '<tr>'
					_table +=	'<td>' + ele['id'] + '</td>'
						_table +=	'<td>' + ele['eventName'] + '</td>'
						_table +=	'<td>' + ele['hbTotal'] + '</td>'
            _table +=	'<td>' + formatCurrency(ele['hbMoneys']) + '</td>'
						_table +=	'<td>' + ele['hbUsers'] + '</td>'
						_table +=	'<td>' + ele['newRegUsers'] + '</td>'
						_table +=	'<td>' + ele['newCardUsers'] + '</td>'
						_table +=	'<td>' + ele['newRegCardRate'] + '</td>'
						_table +=	'<td>' + ele['firstUsers'] + '</td>'
						_table +=	'<td>' + ele['firstValidUsers'] + '</td>'
						_table +=	'<td>' + ele['firstValidInvestmentRate'] + '</td>'
						_table +=	'<td>' + ele['repeatUsers'] + '</td>'
						_table +=	'<td>' + ele['repeatValidUsers'] + '</td>'
            _table +=	'<td>' + ele['repeatValidInvestmentRate'] + '</td>'

						_table +=	'<td>' + (new Date(ele['eventStime']).format()) + '</td>'
            _table +=	'<td>' + (new Date(ele['eventEtime']).format()) + '</td>'
            _table +=	'<td>' + ele['onlineDays'] + '</td>'
        _table += '</tr>'
    })

    _table +=`</tbody></table>`

    return _table
  }

  /**
   * 创建活动列表更多list
   * @param tbodyArr
   */
  function createMoreList(tbodyArr) {
    var _moreLi;
    _moreLi = '<ul><li class="li1">更多</li>'

    tbodyArr.forEach(function(ele,index){
      let dataLi = 'id=' + ele['id'] + '&'

			dataLi += 'province=' + ele['id'] + '&'
			dataLi += 'city=' + ele['id'] + '&'
			dataLi += 'nowTimestamp=' + (new Date(ele['eventEtime']).format()) + '&'
			dataLi += 'eventEtime=' + (new Date(ele['eventStime']).format('yyyy-MM-d hh:mm:ss')) + '&'
			dataLi += 'firstUsers=' + ele['repeatUsers'] + '&'
			dataLi += 'firstValidUsers=' + ele['repeatValidUsers'] + '&'
			dataLi += 'repeatUsers=' + ele['repeatValidUsers'] + '&'
			dataLi += 'repeatValidUsers=' + ele['repeatValidUsers']

      _moreLi += '<li data-c="'+ dataLi + '"></li>'

    })
    _moreLi += '</ul>'

    return _moreLi
  }

  /**
   * 关闭iframe窗口
   */
  function close() {
    $("iframe")
    $('#iframe').addClass('hide').empty();
  }

  function monthDiff(d1, d2) {
    var months;
    d1 = new Date(d1)
    d2 = new Date(d2)
    
    months = (d2.getFullYear() - d1.getFullYear()) * 12;
    months -= d1.getMonth() + 1;
    months += d2.getMonth();
    return months <= 0 ? 0 : months;
}
// console.log(monthDiff('2010/4', '2010/12'))

function dateDiff(date1, date2, type) {
  date1 = typeof date1 == 'string' ? new Date(date1) : date1;
  date1 = date1.getTime();
  date2 = typeof date2 == 'string' ? new Date(date2) : date2;
  date2 = date2.getTime();
  type = type || 'hour';
  var diffValue = Math.abs(date2 - date1);
  var second = 1000,
    minute = second * 60,
    hour = minute * 60,
    day = hour * 24,
    month = day * 30,
    year = month * 12;
  var timeType = {
    second: second,
    minute: minute,
    hour: hour,
    day: day,
    month: month,
    year: year
  };
 
  return Math.ceil(diffValue / timeType[type]);
}
console.log(dateDiff('2010/4/15', '2010/12/4', 'month'))
</script>
</html>
